<template>
  <div class="el-input">
      <input type="text" class="el-input__inner" v-model="myValue" 
      :maxlength="maxlength"
      onkeypress="return /^\d$/.test(String.fromCharCode(event.keyCode||event.keycode||event.which))" 
      oninput="this.value = this.value.replace(/\D+/g, &quot;&quot;)" 
      onblur="this.value = this.value.replace(/\D+/g, &quot;&quot;)" 
      onpropertychange="if(!/\D+/.test(this.value)){return;};this.value=this.value.replace(/\D+/g, &quot;&quot;)"
      @change="handleChange()"
      >
  </div>  
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    maxlength: {
      type: Number
    }
  },
  watch: {
    value (value) {
      this.myValue = value
    }
  },
  data () {
    return {
      myValue: ''
    }
  },
  methods: {
    handleChange () {
      // console.log(this.myValue)
      // this.myValue[index] = value
      this.$emit('change', this.myValue).$emit('input', this.myValue)
    }
  }

}
</script>

<style>
  
</style>
